<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="绑定手机" left-arrow fixed @click-left="$router.back()"/>
    <!-- 导航栏 end -->

    <!-- 内容 -->
    <div class="user">
      <van-form @submit="onSubmit" class="form">
        <span class="hint">绑定后可使用该手机号登录</span>
        <van-field v-model="phone" size="large" name="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" style="font-size: 16px" />
        <van-field v-model="code" size="large" center clearable placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]" style="font-size: 16px">
          <template #button>
            <van-button size="small" type="primary" class="yzm" :disabled="codeBtnEnabel" @click="onYzm" native-type="button">{{codeBtnTitle}}</van-button>
          </template>
        </van-field>
        <div class="btns">
          <van-button round block type="info" native-type="submit" text="绑定" :loading="subLoading"></van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { NavBar, Form, Field, Button,Toast } from "vant";
import { mixin_validate } from "@/mixin/mixins";
import Global from '@/Global';
export default {
  name: "LoginPage",
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
  },
	mixins:[mixin_validate],
  // 定义属性
  data() {
    return {
			subLoading:false,
			yzmLoading:false,
			phone:'',
			code:'',
			codeBtnTitle:'获取验证码',
			codeBtnEnabel:false
		};
  },
  // 方法集合
  methods: {
		onSubmit(){
			this.subLoading = true;
			this.$api.post('/CompanyAccount/BindPhone',{code:this.code,phoneNum:this.phone}).then(res=>{
				this.subLoading = false;
				Toast(res.msg);
				if(res.success){
					this.$bus.$emit(Global.bus_company_bindphone_update);
				}
			})
		},
		onYzm(){
      if (!this.validate_phone.test(this.phone)) {
        Toast("手机号格式不正确");
        return;
      }
      this.yzmLoading = true;
      this.$api.get("/CompanyAccount/SendPhoneCode", { mobileNum: this.phone }).then((res) => {
				this.yzmLoading = false;
        Toast(res.msg);
        if (res.success) {
          this.getYZMSuccess();
        }
      });
		},
		//验证码倒计时
    getYZMSuccess() {
      let count = 60;
      let timmer = setInterval(() => {
        this.codeBtnTitle = `${count}s`;
        this.codeBtnEnabel = true;
        count--;
        if (count < 0) {
          this.codeBtnTitle = "获取验证码";
          this.codeBtnEnabel = false;
          clearInterval(timmer);
        }
      }, 1000);
    },
	},
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
</style>